<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H</title>
    <!-- load 依赖的库 -->
    <script src="../libs/system.js"></script>
    <script>
        System.import('../libs/cc.js');
    </script>
    <script src="../dist/v1.js"></script>
    <script src="../src/v1/template_2d.js"></script>
    <script>

        let renderer,camera;
        app.DepthScale = 1;
        app.init = function () {

            for(let k in cc){
                console.log(k);
            }

            // 注册鼠标事件
            v1.input.init(__canvas);

            // init graphics
            v1.globalGraphics.init(__imageData);

            // init camera
            camera  = new v1.Camera();
            camera.lookAt(cc.v3(0,2,5),cc.v3(),cc.Vec3.UNIT_Y);

            const fov = 60 * Math.PI / 180;
            const aspect = this.width / this.height;
            camera.project(fov,aspect,0.1,100);
            camera.touchMove = function(pos,deltaPos){
                if(deltaPos.x > 0){
                    console.log('从左到右....');
                }else if(deltaPos.x < 0){
                    console.log('从右到左.....');
                }
            };

            // init light
            camera.setAmbientLight(new v1.AmbientLight());

            let dir = cc.v3(-1,1,1);
            camera.setDiffuseLight(new v1.DirLight(dir));

            v1.input.addObserver(camera);

            // init renderer
            renderer = new v1.RendererV1(camera);

            // init mesh
            v1.GLTFLoader.load('./assets/monkey.gltf',(err,meshInfo)=>{
                if(err) throw err;
                console.log('meshInfo:',meshInfo);
                let entity = new v1.Entity(meshInfo);
                entity.setDebugObb(false);
                cc.Mat4.transform(entity._worldMat,entity._worldMat,cc.v3(3,0,0));
                renderer.add(entity);
                // entity.update = function(){
                //     cc.Mat4.rotateY(this._worldMat,this._worldMat,1 * Math.PI/180);
                // }
            });

            let meshInfo = new v1.BoxMeshInfo({
                min:[-1,-1,-1],
                max:[1,1,1]
            });
            let entity = new v1.Entity(meshInfo);
            entity._mesh._bWireFrame = false;
            entity._mesh._bCullBack = true;
            renderer.add(entity);
            entity.update = function () {
                cc.Mat4.rotateY(this._worldMat,this._worldMat,1 * Math.PI/180);
            };

            let ballMeshInfo = new v1.BallMeshInfo(1,20);
            let ball = new v1.Entity(ballMeshInfo);
            renderer.add(ball);
            cc.Mat4.transform(ball._worldMat,ball._worldMat,cc.v3(-3,0,0));
        };

        app.render = function () {
            v1.globalGraphics.clear();
            renderer.render();

            // for test
            // v1.globalGraphics.gourand3d.drawDepthBuffer();
        };

        app.update = function () {
            renderer.update();
        }
    </script>
</head>
<body>

</body>
</html>
